<template>
  <div class="analytics-container">
    <el-card shadow="hover" class="analytics-card">
      <template #header>
        <div class="card-header">
          <h1>数据统计分析</h1>
          <div class="header-actions">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
              :shortcuts="dateShortcuts"
          @change="handleDateChange"
        />
            <el-button type="primary" icon="Refresh" @click="refreshData">刷新数据</el-button>
            <el-dropdown @command="handleExport">
              <el-button type="success" icon="Download">
                导出数据
                <el-icon class="el-icon--right"><arrow-down /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="excel">导出为Excel</el-dropdown-item>
                  <el-dropdown-item command="csv">导出为CSV</el-dropdown-item>
                  <el-dropdown-item command="pdf">导出为PDF</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </template>
      
      <div class="analytics-content">
        <!-- 数据总览 -->
        <div class="data-overview">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12" :md="6">
              <el-card shadow="hover" class="data-card">
                <div class="data-header">
                  <span class="data-title">总用户数</span>
                  <el-tooltip content="系统中的所有用户账号数量" placement="top">
                    <el-icon><question-filled /></el-icon>
                  </el-tooltip>
                </div>
                <div class="data-body">
                  <div class="data-value">{{ formatNumber(overview.totalUsers) }}</div>
                  <div class="data-trend" :class="{ 'up': overview.userGrowth > 0, 'down': overview.userGrowth < 0 }">
                    <el-icon v-if="overview.userGrowth > 0"><caret-top /></el-icon>
                    <el-icon v-else-if="overview.userGrowth < 0"><caret-bottom /></el-icon>
                    <span>{{ formatNumber(Math.abs(overview.userGrowth), true) }}</span>
                  </div>
                </div>
                <div class="data-chart-mini">
                  <!-- 迷你图表 -->
                </div>
              </el-card>
            </el-col>
            
            <el-col :xs="24" :sm="12" :md="6">
              <el-card shadow="hover" class="data-card">
                <div class="data-header">
                  <span class="data-title">总访问量</span>
                  <el-tooltip content="系统的总访问次数" placement="top">
                    <el-icon><question-filled /></el-icon>
                  </el-tooltip>
                </div>
                <div class="data-body">
                  <div class="data-value">{{ formatNumber(overview.totalVisits) }}</div>
                  <div class="data-trend" :class="{ 'up': overview.visitGrowth > 0, 'down': overview.visitGrowth < 0 }">
                    <el-icon v-if="overview.visitGrowth > 0"><caret-top /></el-icon>
                    <el-icon v-else-if="overview.visitGrowth < 0"><caret-bottom /></el-icon>
                    <span>{{ formatNumber(Math.abs(overview.visitGrowth), true) }}</span>
      </div>
    </div>
                <div class="data-chart-mini">
                  <!-- 迷你图表 -->
                </div>
              </el-card>
            </el-col>
            
            <el-col :xs="24" :sm="12" :md="6">
              <el-card shadow="hover" class="data-card">
                <div class="data-header">
                  <span class="data-title">操作总数</span>
                  <el-tooltip content="用户执行的所有操作次数" placement="top">
                    <el-icon><question-filled /></el-icon>
                  </el-tooltip>
                </div>
                <div class="data-body">
                  <div class="data-value">{{ formatNumber(overview.totalOperations) }}</div>
                  <div class="data-trend" :class="{ 'up': overview.operationGrowth > 0, 'down': overview.operationGrowth < 0 }">
                    <el-icon v-if="overview.operationGrowth > 0"><caret-top /></el-icon>
                    <el-icon v-else-if="overview.operationGrowth < 0"><caret-bottom /></el-icon>
                    <span>{{ formatNumber(Math.abs(overview.operationGrowth), true) }}</span>
            </div>
          </div>
                <div class="data-chart-mini">
                  <!-- 迷你图表 -->
                </div>
              </el-card>
            </el-col>
            
            <el-col :xs="24" :sm="12" :md="6">
              <el-card shadow="hover" class="data-card">
                <div class="data-header">
                  <span class="data-title">转化率</span>
                  <el-tooltip content="操作次数与访问量的比率" placement="top">
                    <el-icon><question-filled /></el-icon>
                  </el-tooltip>
                </div>
                <div class="data-body">
                  <div class="data-value">{{ overview.conversionRate }}%</div>
                  <div class="data-trend" :class="{ 'up': overview.conversionGrowth > 0, 'down': overview.conversionGrowth < 0 }">
                    <el-icon v-if="overview.conversionGrowth > 0"><caret-top /></el-icon>
                    <el-icon v-else-if="overview.conversionGrowth < 0"><caret-bottom /></el-icon>
                    <span>{{ overview.conversionGrowth }}%</span>
            </div>
          </div>
                <div class="data-chart-mini">
                  <!-- 迷你图表 -->
        </div>
              </el-card>
      </el-col>
    </el-row>
        </div>
    
    <!-- 图表区域 -->
        <div class="chart-section">
          <el-tabs v-model="activeTab">
            <el-tab-pane label="趋势分析" name="trends">
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-card shadow="hover" class="chart-card">
                    <template #header>
          <div class="chart-header">
                        <h3>系统使用趋势</h3>
            <div class="chart-actions">
                          <el-radio-group v-model="trendsTimeUnit" size="small" @change="updateTrendsChart">
                            <el-radio-button label="day">日</el-radio-button>
                <el-radio-button label="week">周</el-radio-button>
                <el-radio-button label="month">月</el-radio-button>
              </el-radio-group>
                          <el-select v-model="trendsMetrics" multiple collapse-tags style="width: 220px" placeholder="选择指标" size="small" @change="updateTrendsChart">
                            <el-option
                              v-for="item in metricsOptions"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>
            </div>
          </div>
                    </template>
                    <div class="chart-container" style="height: 400px;" ref="trendsChartRef">
                      <!-- 趋势图表将在这里渲染 -->
                    </div>
                  </el-card>
                </el-col>
              </el-row>
              
              <el-row :gutter="20">
                <el-col :xs="24" :md="12">
                  <el-card shadow="hover" class="chart-card">
                    <template #header>
                      <div class="chart-header">
                        <h3>用户活跃度</h3>
                        <div class="chart-actions">
                          <el-select v-model="userActivityType" size="small" @change="updateUserActivityChart">
                            <el-option label="日活跃用户" value="daily" />
                            <el-option label="周活跃用户" value="weekly" />
                            <el-option label="月活跃用户" value="monthly" />
                          </el-select>
          </div>
        </div>
                    </template>
                    <div class="chart-container" style="height: 300px;" ref="userActivityChartRef">
                      <!-- 用户活跃度图表将在这里渲染 -->
                    </div>
                  </el-card>
      </el-col>
      
                <el-col :xs="24" :md="12">
                  <el-card shadow="hover" class="chart-card">
                    <template #header>
          <div class="chart-header">
                        <h3>访问时段分布</h3>
            <div class="chart-actions">
                          <el-select v-model="accessTimeType" size="small" @change="updateAccessTimeChart">
                            <el-option label="工作日" value="weekday" />
                            <el-option label="周末" value="weekend" />
                            <el-option label="全部" value="all" />
              </el-select>
            </div>
          </div>
                    </template>
                    <div class="chart-container" style="height: 300px;" ref="accessTimeChartRef">
                      <!-- 访问时段分布图表将在这里渲染 -->
          </div>
                  </el-card>
      </el-col>
    </el-row>
            </el-tab-pane>
            
            <el-tab-pane label="用户分析" name="users">
              <el-row :gutter="20">
                <el-col :xs="24" :md="8">
                  <el-card shadow="hover" class="chart-card">
                    <template #header>
          <div class="chart-header">
                        <h3>用户角色分布</h3>
            </div>
                    </template>
                    <div class="chart-container" style="height: 300px;" ref="userRoleChartRef">
                      <!-- 用户角色分布图表将在这里渲染 -->
            </div>
                  </el-card>
                </el-col>
                
                <el-col :xs="24" :md="8">
                  <el-card shadow="hover" class="chart-card">
                    <template #header>
                      <div class="chart-header">
                        <h3>用户部门分布</h3>
          </div>
                    </template>
                    <div class="chart-container" style="height: 300px;" ref="userDeptChartRef">
                      <!-- 用户部门分布图表将在这里渲染 -->
          </div>
                  </el-card>
      </el-col>
      
                <el-col :xs="24" :md="8">
                  <el-card shadow="hover" class="chart-card">
                    <template #header>
          <div class="chart-header">
                        <h3>用户状态分布</h3>
                      </div>
                    </template>
                    <div class="chart-container" style="height: 300px;" ref="userStatusChartRef">
                      <!-- 用户状态分布图表将在这里渲染 -->
            </div>
                  </el-card>
                </el-col>
              </el-row>
              
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-card shadow="hover" class="chart-card">
                    <template #header>
                      <div class="chart-header">
                        <h3>用户活跃排行</h3>
            <div class="chart-actions">
                          <el-select v-model="userRankingType" size="small" @change="updateUserRankingTable">
                            <el-option label="登录次数" value="login" />
                            <el-option label="操作次数" value="operation" />
                            <el-option label="在线时长" value="online" />
                          </el-select>
                          <el-select v-model="userRankingLimit" size="small" @change="updateUserRankingTable">
                            <el-option label="TOP 10" :value="10" />
                            <el-option label="TOP 20" :value="20" />
                            <el-option label="TOP 50" :value="50" />
                          </el-select>
            </div>
                  </div>
                </template>
                    <el-table :data="userRanking" style="width: 100%">
                      <el-table-column type="index" width="60" label="排名" />
                      <el-table-column prop="username" label="用户名" width="150" />
                      <el-table-column prop="nickname" label="昵称" width="150" />
                      <el-table-column prop="department" label="部门" width="150" />
                      <el-table-column prop="role" label="角色" width="150" />
                      <el-table-column :prop="userRankingColumn.prop" :label="userRankingColumn.label">
                <template #default="scope">
                          <div class="ranking-value">
                            <el-progress :percentage="scope.row.percentage" :color="scope.row.color" :show-text="false" />
                            <span>{{ formatRankingValue(scope.row[userRankingColumn.prop]) }}</span>
                  </div>
                </template>
              </el-table-column>
            </el-table>
                  </el-card>
                </el-col>
              </el-row>
            </el-tab-pane>
            
            <el-tab-pane label="功能分析" name="features">
              <el-row :gutter="20">
                <el-col :xs="24" :md="12">
                  <el-card shadow="hover" class="chart-card">
                    <template #header>
                      <div class="chart-header">
                        <h3>功能访问排行</h3>
                        <div class="chart-actions">
                          <el-select v-model="featuresTopType" size="small" @change="updateFeaturesTopChart">
                            <el-option label="访问次数最多" value="most" />
                            <el-option label="访问次数最少" value="least" />
                          </el-select>
                          <el-select v-model="featuresTopLimit" size="small" @change="updateFeaturesTopChart">
                            <el-option label="TOP 5" :value="5" />
                            <el-option label="TOP 10" :value="10" />
                            <el-option label="TOP 15" :value="15" />
                          </el-select>
                        </div>
                      </div>
                    </template>
                    <div class="chart-container" style="height: 350px;" ref="featuresTopChartRef">
                      <!-- 功能访问排行图表将在这里渲染 -->
                    </div>
                  </el-card>
                </el-col>
                
                <el-col :xs="24" :md="12">
                  <el-card shadow="hover" class="chart-card">
                    <template #header>
                      <div class="chart-header">
                        <h3>操作类型分布</h3>
                      </div>
                    </template>
                    <div class="chart-container" style="height: 350px;" ref="operationTypeChartRef">
                      <!-- 操作类型分布图表将在这里渲染 -->
                    </div>
                  </el-card>
                </el-col>
              </el-row>
              
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-card shadow="hover" class="chart-card">
                    <template #header>
                      <div class="chart-header">
                        <h3>功能使用热力图</h3>
                        <div class="chart-actions">
                          <el-select v-model="heatmapDateRange" size="small" @change="updateHeatmapChart">
                            <el-option label="最近一周" value="week" />
                            <el-option label="最近一月" value="month" />
                            <el-option label="最近三月" value="quarter" />
                          </el-select>
                        </div>
                      </div>
                    </template>
                    <div class="chart-container" style="height: 400px;" ref="heatmapChartRef">
                      <!-- 功能使用热力图将在这里渲染 -->
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </el-tab-pane>
            
            <el-tab-pane label="系统性能" name="performance">
              <el-row :gutter="20">
                <el-col :xs="24" :md="12">
                  <el-card shadow="hover" class="chart-card">
                    <template #header>
                      <div class="chart-header">
                        <h3>服务器负载</h3>
                        <div class="chart-actions">
                          <el-select v-model="performanceTimeRange" size="small" @change="updatePerformanceCharts">
                            <el-option label="最近24小时" value="day" />
                            <el-option label="最近7天" value="week" />
                            <el-option label="最近30天" value="month" />
                          </el-select>
          </div>
        </div>
                    </template>
                    <div class="chart-container" style="height: 300px;" ref="serverLoadChartRef">
                      <!-- 服务器负载图表将在这里渲染 -->
                    </div>
                  </el-card>
                </el-col>
                
                <el-col :xs="24" :md="12">
                  <el-card shadow="hover" class="chart-card">
                    <template #header>
                      <div class="chart-header">
                        <h3>内存使用</h3>
                      </div>
                    </template>
                    <div class="chart-container" style="height: 300px;" ref="memoryUsageChartRef">
                      <!-- 内存使用图表将在这里渲染 -->
                    </div>
                  </el-card>
                </el-col>
              </el-row>
              
              <el-row :gutter="20">
                <el-col :xs="24" :md="12">
                  <el-card shadow="hover" class="chart-card">
                    <template #header>
                      <div class="chart-header">
                        <h3>API响应时间</h3>
                      </div>
                    </template>
                    <div class="chart-container" style="height: 300px;" ref="apiResponseChartRef">
                      <!-- API响应时间图表将在这里渲染 -->
                    </div>
                  </el-card>
                </el-col>
                
                <el-col :xs="24" :md="12">
                  <el-card shadow="hover" class="chart-card">
                    <template #header>
                      <div class="chart-header">
                        <h3>错误率</h3>
                      </div>
                    </template>
                    <div class="chart-container" style="height: 300px;" ref="errorRateChartRef">
                      <!-- 错误率图表将在这里渲染 -->
                    </div>
                  </el-card>
      </el-col>
    </el-row>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'DataAnalytics',
  data() {
    return {
      // 日期选择
      dateRange: [
        new Date(new Date().getTime() - 30 * 24 * 60 * 60 * 1000),
        new Date()
      ],
      dateShortcuts: [
        {
          text: '最近一周',
          value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 7 * 24 * 60 * 60 * 1000)
            return [start, end]
          },
        },
        {
          text: '最近一月',
          value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 30 * 24 * 60 * 60 * 1000)
            return [start, end]
          },
        },
        {
          text: '最近三个月',
          value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3 * 30 * 24 * 60 * 60 * 1000)
            return [start, end]
          },
        },
      ],
      
      // 数据总览
      overview: {
        totalUsers: 12846,
        userGrowth: 245,
        totalVisits: 458721,
        visitGrowth: 12587,
        totalOperations: 2134567,
        operationGrowth: -3254,
        conversionRate: 36.8,
        conversionGrowth: 2.4
      },
      
      // 当前激活的标签页
      activeTab: 'trends',
      
      // 趋势分析相关
      trendsTimeUnit: 'day',
      trendsMetrics: ['visits', 'users', 'operations'],
      metricsOptions: [
        { label: '访问量', value: 'visits' },
        { label: '用户数', value: 'users' },
        { label: '操作数', value: 'operations' },
        { label: '新增用户', value: 'newUsers' },
        { label: '登录次数', value: 'logins' }
      ],
      userActivityType: 'daily',
      accessTimeType: 'all',
      
      // 用户分析相关
      userRankingType: 'operation',
      userRankingLimit: 10,
      userRanking: [], // 将在mounted或方法中生成
      
      // 功能分析相关
      featuresTopType: 'most',
      featuresTopLimit: 10,
      heatmapDateRange: 'week',
      
      // 系统性能相关
      performanceTimeRange: 'day'
    }
  },
  computed: {
    // 用户排行榜的列名和数据属性
    userRankingColumn() {
      const columnMap = {
        'login': { prop: 'loginCount', label: '登录次数' },
        'operation': { prop: 'operationCount', label: '操作次数' },
        'online': { prop: 'onlineTime', label: '在线时长(小时)' }
      }
      return columnMap[this.userRankingType] || columnMap.operation
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    // 初始化所有数据
    initData() {
      // 生成模拟数据并初始化图表
      this.generateUserRanking()
      this.updateTrendsChart()
      this.updateUserActivityChart()
      this.updateAccessTimeChart()
      this.updateUserRoleChart()
      this.updateUserDeptChart()
      this.updateUserStatusChart()
      this.updateFeaturesTopChart()
      this.updateOperationTypeChart()
      this.updateHeatmapChart()
      this.updatePerformanceCharts()
    },
    
    // 处理日期变化
    handleDateChange() {
      this.refreshData()
    },
    
    // 刷新所有数据
    refreshData() {
      // 在实际项目中，这里应该调用API重新获取数据
      this.$message.success('数据已刷新')
      this.initData()
    },
    
    // 处理导出操作
    handleExport(command) {
      // 在实际项目中，这里应该调用API导出数据
      this.$message.success(`正在导出为${command.toUpperCase()}格式，请稍候...`)
      
      setTimeout(() => {
        this.$message.success('导出成功，请检查下载内容')
      }, 2000)
    },
    
    // 格式化数字显示（添加千位分隔符）
    formatNumber(num, showSign = false) {
      if (typeof num !== 'number') return num
      
      const prefix = showSign && num > 0 ? '+' : ''
      return prefix + num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
    },
    
    // 格式化排行榜数值
    formatRankingValue(value) {
      if (this.userRankingType === 'online') {
        // 格式化为小时，保留1位小数
        return value.toFixed(1) + ' 小时'
      } else {
        // 其他类型直接显示数值
        return this.formatNumber(value) + ' 次'
      }
    },
    
    // 生成用户排行数据（模拟数据）
    generateUserRanking() {
      const users = [
        { username: 'admin', nickname: '管理员', department: '管理部', role: '超级管理员' },
        { username: 'zhangsan', nickname: '张三', department: '研发部', role: '开发工程师' },
        { username: 'lisi', nickname: '李四', department: '市场部', role: '市场专员' },
        { username: 'wangwu', nickname: '王五', department: '人力资源部', role: '人事专员' },
        { username: 'zhaoliu', nickname: '赵六', department: '财务部', role: '财务主管' },
        { username: 'qianqi', nickname: '钱七', department: '销售部', role: '销售经理' },
        { username: 'zhuba', nickname: '朱八', department: '研发部', role: '测试工程师' },
        { username: 'wangjiu', nickname: '王九', department: '研发部', role: '产品经理' },
        { username: 'liushi', nickname: '刘十', department: '市场部', role: '市场经理' },
        { username: 'chenyi', nickname: '陈一', department: '销售部', role: '销售专员' },
        { username: 'yangyi', nickname: '杨一', department: '客服部', role: '客服专员' },
        { username: 'zhouyi', nickname: '周一', department: '财务部', role: '出纳' },
        { username: 'wuyi', nickname: '吴一', department: '人力资源部', role: '招聘专员' },
        { username: 'xuyi', nickname: '徐一', department: '研发部', role: '前端工程师' },
        { username: 'heyi', nickname: '何一', department: '研发部', role: '后端工程师' }
      ]
      
      // 根据当前选择的排行类型，生成随机数据
      const getRandomValue = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min
      
      let prop = this.userRankingColumn.prop
      let maxValue = 0
      
      const rankings = users.map(user => {
        let value = 0
        
        switch (this.userRankingType) {
          case 'login':
            value = getRandomValue(50, 500)
            break
          case 'operation':
            value = getRandomValue(200, 2000)
            break
          case 'online':
            value = getRandomValue(20, 200) / 10 // 除以10得到小数点后一位
            break
          default:
            value = getRandomValue(100, 1000)
        }
        
        if (value > maxValue) maxValue = value
        
        return {
          ...user,
          [prop]: value,
          color: this.getRandomColor()
        }
      })
      
      // 计算百分比
      rankings.forEach(item => {
        item.percentage = Math.round((item[prop] / maxValue) * 100)
      })
      
      // 排序
      rankings.sort((a, b) => b[prop] - a[prop])
      
      // 限制数量
      this.userRanking = rankings.slice(0, this.userRankingLimit)
    },
    
    // 获取随机颜色
    getRandomColor() {
      const colors = [
        '#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399',
        '#1989FA', '#5CB87A', '#FAAD14', '#F78989', '#C8C9CC'
      ]
      return colors[Math.floor(Math.random() * colors.length)]
    },
    
    // 更新趋势图表
    updateTrendsChart() {
      // 在实际项目中，这里应该使用图表库渲染图表
      console.log('更新趋势图表', {
        timeUnit: this.trendsTimeUnit,
        metrics: this.trendsMetrics
      })
    },
    
    // 更新用户活跃度图表
    updateUserActivityChart() {
      console.log('更新用户活跃度图表', {
        type: this.userActivityType
      })
    },
    
    // 更新访问时段分布图表
    updateAccessTimeChart() {
      console.log('更新访问时段分布图表', {
        type: this.accessTimeType
      })
    },
    
    // 更新用户角色分布图表
    updateUserRoleChart() {
      console.log('更新用户角色分布图表')
    },
    
    // 更新用户部门分布图表
    updateUserDeptChart() {
      console.log('更新用户部门分布图表')
    },
    
    // 更新用户状态分布图表
    updateUserStatusChart() {
      console.log('更新用户状态分布图表')
    },
    
    // 更新用户排行表格
    updateUserRankingTable() {
      this.generateUserRanking()
    },
    
    // 更新功能访问排行图表
    updateFeaturesTopChart() {
      console.log('更新功能访问排行图表', {
        type: this.featuresTopType,
        limit: this.featuresTopLimit
      })
    },
    
    // 更新操作类型分布图表
    updateOperationTypeChart() {
      console.log('更新操作类型分布图表')
    },
    
    // 更新热力图
    updateHeatmapChart() {
      console.log('更新热力图', {
        dateRange: this.heatmapDateRange
      })
    },
    
    // 更新性能相关图表
    updatePerformanceCharts() {
      console.log('更新性能相关图表', {
        timeRange: this.performanceTimeRange
      })
    }
  }
}
</script>

<style scoped>
.analytics-container {
  padding: 20px;
}

.analytics-card {
  min-height: calc(100vh - 200px);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.analytics-content {
  margin-top: 20px;
}

/* 数据总览卡片样式 */
.data-overview {
  margin-bottom: 20px;
}

.data-card {
  height: 100%;
  position: relative;
}

.data-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.data-title {
  font-size: 16px;
  font-weight: 500;
  margin-right: 10px;
}

.data-body {
  display: flex;
  align-items: baseline;
  margin-bottom: 10px;
}

.data-value {
  font-size: 24px;
  font-weight: bold;
  margin-right: 10px;
}

.data-trend {
  font-size: 14px;
  display: flex;
  align-items: center;
}

.data-trend.up {
  color: #67C23A;
}

.data-trend.down {
  color: #F56C6C;
}

.data-chart-mini {
  height: 40px;
  width: 100%;
  margin-top: 5px;
}

/* 图表卡片样式 */
.chart-card {
  margin-bottom: 20px;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

.chart-actions {
  display: flex;
  gap: 10px;
}

/* 排行榜样式 */
.ranking-value {
  display: flex;
  align-items: center;
}

.ranking-value .el-progress {
  width: 120px;
  margin-right: 10px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .header-actions {
    flex-direction: column;
    gap: 10px;
  }
  
  .chart-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .chart-actions {
    margin-top: 10px;
  }
}
</style> 